Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
:root {
	--background: #EDEEF7;
	--gray: #EDEEF7;
	--white: #ffffff;
	--poppins: 'Poppins', sans-serif;
	--shadow-opacity: 0.30;
	--blur: 10px;
}

body {
	font-family: var(--poppins), sans-serif;
	font-size: 1rem;
	// background: var(--background);
	background-image: url('https://images.pexels.com/photos/13574114/pexels-photo-13574114.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load');
	background-position: center center;
	background-size: cover;
	display: flex;
	width: 100vw;
	height: 100vh;
}

*,
*:before,
*:after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
}

#team-members {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 550px;
	margin: auto;
	padding: 50px;
	
	background: rgba( 255, 255, 255, 0.25 );
	// box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
	backdrop-filter: blur(var(--blur));
	border-radius: 10px;
	border: 1px solid rgba(white, 0.08);
	// filter: blur(var(--blur));
	// border-radius: 32px;
	filter:  drop-shadow(0px 20px 10px rgba(0, 0, 0, var(--shadow-opacity)));
}

.team-member {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	min-height: 60px;
	padding: 16px;
	background-color: var(--white);
	border-radius: 24px;
	// box-shadow: 0x 6px 24px 0px rgba(0, 0, 0, 0.5);
	font-size: 16px;
	z-index: 1;
	
	&:hover {
		cursor: grab;
	}
	
	&-avatar {
		width: 3.75rem;
		height: 3.75rem;
		object-fit: cover;
		border-radius: 50%;
	}
	
	&-name {
		display: grid;
		gap: 0.125rem;
		
		h3 {
			font-size: large;
		}
		p {
			font-size: smaller;
		}
	}
	
	&-chosen {
		box-shadow: 8px 8px 32px rgba(black, 0.3);
	}
	
	&-drag {
		opacity: 0; 
	}
}

.social-links {
	display: flex;
	flex-direction: row;
	gap: 6px;
	margin-left: auto;
	padding: 0;
	list-style-type: none;
	
	i {
		width: 1.25rem;
		height: 1.25rem;
		font-size: 1.25rem;
	}
}

Frontend Forever App